<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <title>城市选择</title>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/three/mui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/three/mui.picker.css" />
    <style>
        .takeaddresscontentbox {
            margin-top: 44px;
        }
        
        .heand_con {
            width: auto;
            padding-left: 0;
        }
        
        .mui-action-back {
            position: absolute;
            width: 10%;
        }
        
        .mui-action-back img {
            width: 0.2rem;
            margin-left: 0.2rem;
            margin-top: 0.3rem;
        }
        
        .addaddress {
            position: absolute;
            bottom: 0;
            right: 0.2rem;
        }
        
        #city_text {
            text-align: center;
            background: #fff;
            height: 40px;
            line-height: 40px;
        }
        
        #detailcontent {
            height: 200px;
            margin: 0;
            border: none;
            border-top: solid 1px #ccc;
        }
        
        .default {
            padding: 0 0.2rem;
            background: #fff;
            height: 40px;
            line-height: 40px;
            border-top: solid 1px #ccc;
        }
        
        .infobox {
            background: #fff;
        }
        
        .mui-switch {
            margin-top: 0.1rem;
        }
        
        .newCons {
            padding-top: 60px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .newTitile {
            margin-bottom: 10px;
        }
        
        .newTitile input {
            border-radius: 100px;
            border: 1px solid #dcdcdc;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
        }
        
        .newTitile span {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        
        .newTitile #city_text {
            border-radius: 100px;
            border: 1px solid #dcdcdc;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
        }
        
        .newTitile textarea {
            border-radius: 10px;
            border: 1px solid #dcdcdc!important;
        }
    </style>
    <script src="../../../js/three/jquery.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="mui-back mui-action-back fl"><img src="../../../images/icon/Back_j.png"></div>
        <div class="heand_con">管理收货地址</div>
        <div class="addaddress" id="addaddress">
            保存
        </div>
        <div class="clear"></div>
    </div>
    <div class="newCons">
        <div class="newTitile">
            <span>姓名</span>
            <input id="name" type="text" placeholder="姓名">
        </div>
        <div class="newTitile">
            <span>电话</span>
            <input id="tel" type="text" placeholder="手机号码">
        </div>
        <div class="newTitile">
            <span>选择地区</span>
            <div id="city_text">请选择所在地区</div>
        </div>
        <div class="newTitile">
            <span>详细地址</span>
            <textarea id="detailcontent" placeholder="详细地址"></textarea>
        </div>
        <div class="newTitile" style="position: relative;">
            <span>设为默认</span>
            <div class="mui-switch mui-switch-mini fr" style="position: absolute;top: -10px;right: 0px;">
                <div class="mui-switch-handle"></div>
            </div>
        </div>
    </div>
    <!-- <div class="takeaddresscontentbox">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <input id="name" type="text" placeholder="姓名">
            </div>
            <div class="mui-input-row">
                <input id="tel" type="text" placeholder="手机号码">
            </div>
        </form>
        <div class="infobox">
            <div id="city_text">请选择所在地区</div>
            <textarea id="detailcontent" placeholder="详细地址"></textarea>
            <div class="default">
                <span class="fl">设为默认</span>
                <div class="mui-switch mui-switch-mini fr">
                    <div class="mui-switch-handle"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>


    </div> -->

</body>
<script src="../../../js/three/mui.min.js"></script>
<script src="../../../js/app.js"></script>
<script src="../../../js/vue.min.js"></script>
<script src="../../../js/token.js"></script>
<script src="../../../js/three/data.city.js"></script>
<script src="../../../js/three/mui.picker.min.js"></script>
<script src="../../../js/verification.js"></script>
<script>
    mui.plusReady(function() {
        state = app.getState();
        uid = state.userid;
        memberToken = state.memberToken;
        var self = plus.webview.currentWebview();
        var value = '';
    })

    //选择省市区
    var city_picker = new mui.PopPicker({
        layer: 3
    });
    city_picker.setData(init_city_picker);
    $("#city_text").on("tap", function() {
        setTimeout(function() {
            city_picker.show(function(items) {
            	if(items[1].text==undefined){
						items[1].text='';
					}
					if(items[2].text==undefined){
						items[2].text='';
					}
                //$("#city_id").val((items[0] ||{}).value + "," + (items[1] || {}).value + "," + (items[2] || {}).value); //该ID为接收城市ID字段
                $("#city_text").html((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
            });
        }, 200);
    });
    document.getElementById('addaddress').addEventListener('tap', function(data) {
        if (!verification.parentname(document.getElementById('name').value, "document.getElementById('name')")) return;
        if (!verification.phone(document.getElementById('tel').value, "document.getElementById('tel')")) return;
        if (document.getElementById('city_text').innerHTML == "请选择所在地区") {
            plus.nativeUI.toast('请选择所在地区');
            return
        }
        if (document.getElementById('detailcontent').value == '') {
            plus.nativeUI.toast('请输入详细地址');
            return
        }
        if ($('.mui-switch').hasClass('mui-active')) {
            value = 1
        } else {
            value = ''
        }

        mui.post(Apiurl+'shop/address', {
            uid: uid,
            memberToken: memberToken,
            receive_name: document.getElementById('name').value,
            receive_phone: document.getElementById('tel').value,
            province: document.getElementById('city_text').innerHTML,
            receive_address: document.getElementById('detailcontent').value,
            value: value
        }, function(data) {
            if (data.status == 200) {
                plus.nativeUI.toast('保存成功');
                plus.webview.currentWebview().close();
                mui.fire(plus.webview.getWebviewById("takeaddress"), "refreshaddress", {});
                mui.fire(plus.webview.getWebviewById("shopconfirm"), "refreshaddress", {});
            } else if (data.status == 404) {
                plus.nativeUI.toast('收货地址不可超过五条');
            } else if (data.status == 201) {
                plus.nativeUI.toast('保存失败');
            }
        }, 'json')
    })
</script>

</html>